import React, { Component, useState, useEffect, useRef } from 'react'
import { arr } from '../../mock'

// 模拟异步接口
const createData = ({ page = 1, size = 10 }) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(arr.slice((page - 1) * size, page * size))
    }, 1000)
  })
}
/**
 * 函数组件/类组件
 * 1. 有无状态
 * 2. 生命周期
 * setState(() => {}, () => {})
 *
 * 数据更改 触发 componentDidUpdated()
 *
 * 函数组件：
 * 1. useState 保存状态
 * 2. useEffect()
 * 3. useRef() 可以保存dom元素 / 保存一个数据。
 *  useRef 保存值的更新，不需要借助其他函数，可以直接更新，同时，他的更新不会触发render更新
 */
// useState
const Hook = () => {
  // set函数更新引用类型，不能局部更新，必须全部更新
  // set函数是异步更新的，
  const [count, setCount] = useState(0)
  const [optPage, setOptPage] = useState({ page: 1, size: 5 })
  const [arr, setArr] = useState([])

  //
  const myRef = useRef(null)

  const num = useRef(0)

  // didMount / didUpdate / willUnMount
  // 第二个参数数组为空
  // 第二个参数不传/[有依赖] didUpdate
  // 在第一个参数内部return函数
  useEffect(() => {
    console.log('监听到的值:', arr)
    console.log('didMount')
    // let timer = setInterval(() => {
    //   setCount(count + 1)
    // }, 1000)

    // console.log(myRef.current)

    return () => {
      console.log('willUnMount')
      // willUnMount
      // clearInterval(timer)
    }
  }, [count])

  return (
    <div>
      <h1>num:{num.current}</h1>
      <h1 ref={myRef}>
        count:{count} page: {optPage.page}: size:{optPage.size}
      </h1>
      <button
        onClick={() => {
          createData({}).then((list) => {
            // setCount(count + 1)
            // console.log(count, '1count')
            setArr([...arr, ...list])
            console.log('list1:', arr)
          })
          createData({}).then((list) => {
            // setCount(() => count + 1)
            // console.log(count, '2count')
            setArr(() => [...arr, ...list])
            console.log('list1:', arr)
          })

          // ---------------------
          // num.current++
          // console.log(num.current)
          // // return 函数返回一个新的函数具柄 （引用/指针）
          // // setCount(count + 1)
          // // setArr(() => [...arr, 'hello'])
          // // console.log('arr:', arr)
          // // setOptPage({ size: optPage.size + 1, page: optPage.page + 1 })
        }}
      >
        按钮
      </button>
      <h1>{arr.length}</h1>
    </div>
  )
}

export default Hook

// export default class index extends Component {
//   render() {
//     return (
//       <div>index</div>
//     )
//   }
// }
